<template>
	<view>

		<tn-popup v-model="popshow" width="80%" height="600rpx" mode="bottom" backgroundColor="rgba(64, 64, 64, 0.82)"
			:borderRadius="30"  :maskCloseable="true" :closeBtn='false' @close="closedPopup" >
			<gift-list :user_id="user_id" :room_id="id" :yemian="yemian" ></gift-list>
		</tn-popup>


		<dk-tanchuang v-model="giftianchu" width="80%" height="40%" mode="center" :borderRadius="30"
			:giftitle="giftitle" :gifcontent="gifcontent" :giftimg="giftimg"  :maskCloseable="false"  >
		</dk-tanchuang>




		<tn-popup v-model="liwusvgashow" width="100%" height="100%" mode="center"
			backgroundColor="rgba(255, 255, 255, 0.1)" :borderRadius="30" :closeBtn="false" :maskCloseable="false"			>
			<l-svga ref="svga"></l-svga>
		</tn-popup>


	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'

	const audioContext = uni.createInnerAudioContext()
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'TemplateDetails',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			MescrollBody
		},

		data() {
			return {
				yemian:0,
				//、
				songchu:false,
				cardCur: 0,
				liwusvgashow: false,
				giftimg: '',
				giftianchu: false,
				giftitle: '',
				gifcontent: '',
				popshow: true,
				//
				action: host + '/chat/user/up_mp3',
				isRecord: false,
				voc: false,
				vocurl: "",
				vocscend: 0,
				isplay: false,
				op: '',
				truehead: '',
				isRound: true,
				//
				shang_price: 5,
				dashangshow: false,
				
				catsonindex: 0,
				tuijian: [],
				latestUserAvatar: [],
				redbatlist: [],
			
				jubao_body: '',
				jubaoshow: false,
				chongzhiis: false,
				zidongbofang: false,
				videoPlay: false,
				isplay: false,
				type: '',
				index: 0,
				is_focus: false,
				commentCount: 0,
				huifuindex: 0,
				pid: 0,
				loginBoxFlag: false, // 登录框显示隐藏状态
				sendmsgBoy: '',
				sendmsgBoy_huifuname: '',
				content: [],
				loginBoxFlag: false, // 登录框显示隐藏状态
				id: 290,
				user_id:0,
				body: [],
				
				show_poster: false, //显示海报
				path: '', //生成的图片地址			
				posterObj: {
					width: '580rpx',
					height: '928rpx',
					background: '#fff',
					borderRadius: '16rpx',
					views: []
				}, //画板数据
				isUp: false
			}
		},


		onLoad(option) {
			uni.$off('liwuoksvga_room')
			uni.$off('liwuok_room')
			
			uni.$off('liwuoksvga_vod')
			uni.$off('liwuok_vod')
			
			
			let that = this
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			if (option.id) {
				this.id = Number(option.id)
			}
			if (option.user_id) {
				this.user_id = Number(option.user_id)
			}
			if (option.yemian) {
				this.yemian =option.yemian
			}
			
			
			
			
			
			

			uni.$on('liwuok_room', datagift => {
				// console.log(3333333)
				// this.songchu=true
				// this.giftimg = datagift.image				
				// this.giftitle = "成功送出礼物"
				// this.giftianchu = true
				// this.gifcontent = ''			
				// this.popshow = false
				// setTimeout(() => {
				// 	this.giftianchu = false									
				// 	uni.navigateBack()
				// }, 2000);
				//告诉直播房间文字有人送礼物gift图
				uni.sendSocketMessage({
					data: JSON.stringify({
						type:"text",
						room_id: this.id,
						chaoguan: 0,
						sec: 0,
						vip: uni.getStorageSync('userinfo').vip,
						zuojia: uni.getStorageSync('userinfo').zuojia,
						zuojianame: uni.getStorageSync('userinfo').zuojianame,
						lv: uni.getStorageSync('userinfo').lv,
						fromid: uni.getStorageSync('userinfo').user_id,
						fromhead: uni.getStorageSync('userinfo').avatar,
						fromname: uni.getStorageSync('userinfo').nickname,						
						data:'送出礼物'+datagift.title,
					})
				});	
				//、发送到房间通知所有人礼物展示gift
				uni.sendSocketMessage({
					data: JSON.stringify({
						type:"roomqita",
						room_id: this.id,	
						lei:"liwu",
						sec:1,
						svga:'',
						image:datagift.image,
						vip: uni.getStorageSync('userinfo').vip,					
						lv: uni.getStorageSync('userinfo').lv,
						fromid: uni.getStorageSync('userinfo').user_id,
						fromhead: uni.getStorageSync('userinfo').avatar,
						fromname: uni.getStorageSync('userinfo').nickname
					})
				});	
				uni.navigateBack()
				
			});
			uni.$on('liwuoksvga_room', datagift => {
				//告诉直播房间文字有人送礼物sgva动图
				uni.sendSocketMessage({
					data: JSON.stringify({
						type:"text",
						room_id: this.id,
						chaoguan: 0,
						sec: 0,
						vip: uni.getStorageSync('userinfo').vip,
						zuojia: uni.getStorageSync('userinfo').zuojia,
						zuojianame: uni.getStorageSync('userinfo').zuojianame,
						lv: uni.getStorageSync('userinfo').lv,
						fromid: uni.getStorageSync('userinfo').user_id,
						fromhead: uni.getStorageSync('userinfo').avatar,
						fromname: uni.getStorageSync('userinfo').nickname,						
						data:'送出礼物'+datagift.title,
					})
				});	
				
				
				uni.sendSocketMessage({
					data: JSON.stringify({
						type:"roomqita",
						room_id: this.id,	
						lei:"liwu",
						sec: 2,
						image:'',
						svga:datagift.svga,
						vip: uni.getStorageSync('userinfo').vip,					
						lv: uni.getStorageSync('userinfo').lv,
						fromid: uni.getStorageSync('userinfo').user_id,
						fromhead: uni.getStorageSync('userinfo').avatar,
						fromname: uni.getStorageSync('userinfo').nickname
					})
				});	
				uni.navigateBack()
				// this.gifcontent = ''
				// this.songchu=true
				// this.popshow = false
				// this.liwu(datagift.svga)
				
			});
			
			
			
			uni.$on('liwuok_vod', datagift => {
				console.log(3333333)
				this.songchu=true
				this.giftimg = datagift.image				
				this.giftitle = "成功送出礼物"
				this.giftianchu = true
				this.gifcontent = ''			
				this.popshow = false
				setTimeout(() => {
					this.giftianchu = false									
					uni.navigateBack()
				}, 2000);
				
				
				//、发送到对方礼物展示gift
				
				uni.sendSocketMessage({
					data: JSON.stringify({
						type:"liwu_vod",
						toid: this.user_id,						
						sec:1,
						svga:'',					
						image:datagift.image,						
						fromid: uni.getStorageSync('user_id')						
					})
				});	
				
				
			});
			uni.$on('liwuoksvga_vod', datagift => {
				//告诉对方送礼物sgva动图
				
				uni.sendSocketMessage({
					data: JSON.stringify({
						type:"liwu_vod",
						toid: this.user_id,						
						sec:2,
						image:'',
						svga:datagift.svga,						
						fromid: uni.getStorageSync('user_id')						
					})
				});	
				
				this.gifcontent = ''
				this.songchu=true
				this.popshow = false
				this.liwu(datagift.svga)
				
			});
			
			
			
		
		},
		computed: {
			...mapState({
				userInfoAvatar: store => store.userInfo.userInfoAvatar // 头像地址		
			})
		},

		methods: {
			
			liwu(url) {
				this.liwusvgashow = true
				setTimeout(() => {
					this.bofangsvga(url)
				}, 500);
			},

			bofangsvga(url) {

				this.$refs.svga.render(async (parser, player) => {
					const videoItem = await parser.load(url);
					await player.setVideoItem(videoItem);
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 1
					player.clearsAfterStop = true
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation()

					player.onPercentage((percentage) => {
						// 由于有动画未完成时需要显示其他效果的需求，所以监听动画播放进度
						// svga动画播放进度大于 70% 时，显示卡牌
						if (percentage * 100 > 70) {
							//this.svgaShow = false
						}
					})
					// 监听动画完成
					player.onFinished(() => {
						console.log('播放完毕')
						player.clear()
						this.liwusvgashow = false
						uni.navigateBack()
					})
				})
			},

			clickBtn_shenqing(res) {

				if (res == 1) {
					this.chongzhiis = false
					this.navigateToFn({
						url: '/mineMixinPages/gift/chongzhi',
						checkLogin: true
					})
				} else {
					this.chongzhiis = false
				}
			},


			closedPopup() {
				this.popshow = false	
						if (!this.songchu){
							uni.navigateBack()
						}
			},







		}
	}
</script>
<style>
	page {
		/* 必须的样式，这是页面背景色为透明色 */
		background: transparent;
	}
</style>
<style lang="scss" scoped>

</style>